@import 'my-animate.less';

.brand-intro {
  text-align: center;
  background-color: #a811b5;
  color: #fff;
  padding: 120px 0;
  background-image: url(../imgs/grid.png);
  background-image: url(../imgs/grid.png), -webkit-gradient(linear, left bottom, right top, from(#571c94), to(#e609cf));
  background-image: url(../imgs/grid.png), -webkit-linear-gradient(linear, left bottom, right top, from(#571c94), to(#e609cf));
  background-image: url(../imgs/grid.png), -moz-linear-gradient(linear, left bottom, right top, from(#571c94), to(#e609cf));
  background-image: url(../imgs/grid.png), -o-linear-gradient(linear, left bottom, right top, from(#571c94), to(#e609cf));
  background-image: url(../imgs/grid.png), linear-gradient(linear, left bottom, right top, from(#571c94), to(#e609cf));
  background-position: center center;
  background-repeat: no-repeat;

  h1 {
    font-size: 64px;
  }
  .sui-lead {
    font-size: 22px;
    margin: 2em 0;
    line-height: 150%;
  }
}
.btn-lead {
  padding: 1em 4em;
  border: 2px solid #fff;
  opacity: .8;
  background: transparent;
  color: #fff;
  font-size: 24px;
  height: auto;
  &:hover {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    opacity: 1;
  }
}

.btn-lead + .btn-lead {
  margin-left: 2em;
}
